import Link from "next/link";
import { EXTENSION_URL } from "@/utils/config";
import { Logo } from "@/components/new-landing/common/Logo";
import { cn } from "@/utils";
import { FooterLineLogo } from "@/components/new-landing/FooterLineLogo";
import { Paragraph } from "@/components/new-landing/common/Typography";
import { UnicornScene } from "@/components/new-landing/UnicornScene";

const navigation = {
  main: [
    {
      name: "Inbox Zero Tabs (Chrome Extension)",
      href: EXTENSION_URL,
      target: "_blank",
    },
    { name: "AI Email Assistant", href: "/ai-automation" },
    { name: "Reply Zero", href: "/reply-zero-ai" },
    { name: "Bulk Email Unsubscriber", href: "/bulk-email-unsubscriber" },
    { name: "Clean your inbox", href: "/clean-inbox" },
    { name: "Cold Email Blocker", href: "/block-cold-emails" },
    { name: "Email Analytics", href: "/email-analytics" },
    { name: "Open Source", href: "/github", target: "_blank" },
  ],
  useCases: [
    { name: "Founder", href: "/founders" },
    { name: "Small Business", href: "/small-business" },
    { name: "Content Creator", href: "/creator" },
    { name: "Realtor", href: "/real-estate" },
    { name: "Customer Support", href: "/support" },
    { name: "E-commerce", href: "/ecommerce" },
  ],
  support: [
    { name: "Pricing", href: "/#pricing" },
    { name: "Contact", href: "mailto:elie@getinboxzero.com", target: "_blank" },
    {
      name: "Documentation",
      href: "https://docs.getinboxzero.com",
      target: "_blank",
    },
    { name: "Feature Requests", href: "/feature-requests", target: "_blank" },
    { name: "Changelog", href: "/changelog", target: "_blank" },
    {
      name: "Status",
      href: "https://inbox-zero.openstatus.dev/",
      target: "_blank",
    },
  ],
  company: [
    { name: "Affiliates", href: "/affiliates", target: "_blank" },
    { name: "Blog", href: "/blog" },
    { name: "Case Studies", href: "/case-studies" },
    { name: "Twitter", href: "/twitter", target: "_blank" },
    { name: "GitHub", href: "/github", target: "_blank" },
    { name: "Discord", href: "/discord", target: "_blank" },
    { name: "OSS Friends", href: "/oss-friends" },
    { name: "Email Blaster", href: "/game" },
  ],
  legal: [
    { name: "Terms", href: "/terms" },
    { name: "Privacy", href: "/privacy" },
    {
      name: "SOC2 Compliant",
      href: "https://security.getinboxzero.com",
      target: "_blank",
    },
    { name: "Sitemap", href: "/sitemap.xml" },
  ],
  compare: [
    { name: "vs Fyxer.ai", href: "/best-fyxer-alternative" },
    {
      name: "vs Perplexity Email Assistant",
      href: "/best-perplexity-email-assistant-alternative",
    },
  ],
  social: [
    {
      name: "Discord",
      href: "/discord",
      target: "_blank",
      icon: () => (
        <svg
          fill="currentColor"
          viewBox="0 0 24 24"
          className="size-6"
          aria-hidden="true"
        >
          <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
        </svg>
      ),
    },
    {
      name: "GitHub",
      href: "/github",
      target: "_blank",
      icon: () => (
        <svg
          fill="currentColor"
          viewBox="2 2 20 20"
          className="size-6"
          aria-hidden="true"
        >
          <path
            fillRule="evenodd"
            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
            clipRule="evenodd"
          />
        </svg>
      ),
    },
    {
      name: "X",
      href: "/twitter",
      target: "_blank",
      icon: () => (
        <svg
          fill="currentColor"
          viewBox="0 0 16 16"
          className="size-5"
          aria-hidden="true"
        >
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M0.5 0.5H5.75L9.48421 5.71053L14 0.5H16L10.3895 6.97368L16.5 15.5H11.25L7.51579 10.2895L3 15.5H1L6.61053 9.02632L0.5 0.5ZM12.0204 14L3.42043 2H4.97957L13.5796 14H12.0204Z"
          />
        </svg>
      ),
    },
  ],
};

interface FooterProps {
  className: string;
  variant?: "default" | "simple";
}

export function Footer({ className, variant = "default" }: FooterProps) {
  return (
    <footer className="relative z-50 border-t border-[#E7E7E7A3] bg-cover bg-center bg-no-repeat overflow-hidden">
      {variant === "default" ? <UnicornScene className="opacity-15" /> : null}
      <div
        className={cn("overflow-hidden px-6 py-20 sm:py-24 lg:px-8", className)}
      >
        <div className="mt-16 grid grid-cols-2 gap-8 lg:grid-cols-5 xl:col-span-2 xl:mt-0">
          <div>
            <FooterList title="Product" items={navigation.main} />
          </div>
          <div>
            <FooterList title="Use Cases" items={navigation.useCases} />
          </div>
          <div>
            <FooterList title="Support" items={navigation.support} />
          </div>
          <div>
            <FooterList title="Company" items={navigation.company} />
          </div>
          <div>
            <FooterList title="Legal" items={navigation.legal} />
            <div className="mt-6">
              <FooterList title="Compare" items={navigation.compare} />
            </div>
          </div>
        </div>
        <div className="mt-40 flex items-center justify-between">
          <Logo variant="glass" />
          <div className="flex items-center gap-4">
            {navigation.social.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="text-gray-400 hover:text-gray-500"
              >
                <span className="sr-only">{item.name}</span>
                <item.icon />
              </Link>
            ))}
          </div>
        </div>
      </div>
      {variant === "default" ? (
        <FooterLineLogo className="hidden xl:block absolute bottom-0 left-1/2 -translate-x-1/2 mx-auto px-6 lg:px-8 -z-10" />
      ) : null}
    </footer>
  );
}

function FooterList(props: {
  title: string;
  items: { name: string; href: string; target?: string }[];
}) {
  return (
    <>
      <Paragraph
        color="gray-900"
        size="sm"
        className="font-semibold leading-6"
        as="h3"
      >
        {props.title}
      </Paragraph>
      <ul className="mt-6 space-y-3">
        {props.items.map((item) => (
          <li key={item.name}>
            <Link
              href={item.href}
              target={item.target}
              prefetch={item.target !== "_blank"}
              className="text-sm leading-6 text-gray-500 hover:text-gray-900"
            >
              {item.name}
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
}
